<template>
    <section>
        <!-- <el-select v-model="scheduleType" @change="changeScheduleType" placeholder="请选择" class="change-type" size="small">
            <el-option v-for="item in scheduleTypeOption" :key="item.value" :label="item.label" :value="item.value">
            </el-option>
        </el-select> -->
        <div class="no-course-time">
            <div class="class-no-course">
                <el-row v-loading="tableLoading">
                    <div id="class-items" class="class-items">
                        <div class="left-list">
                            <div class="ulList">
                                <ul :class="{'class-list': scheduleType == 'class','teacher-list': scheduleType == 'teacher'}">
                                    <li v-for="(item , index) in leftList" :key="item.id" @click="() => {leftListClick(index, item)}">
                                        <a href="javascript: void(0)" :class="{'activeA': index == leftActive}">{{item.name}}</a>
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </div>
                    <div id="myTable" class=" myTable">
                        <p class="tips">tips：点击课表中空白区域，整个{{type=="class"?"班级":"年级"}}所有学生在该节次不安排课程</p>
                        <!-- <el-table :data="tableData" class="no-assign-table table-bordered" v-loading.body="tableLoading">
                            <el-table-column prop="num" label="" width="180" v-show="false"></el-table-column>
                            <el-table-column prop="Monday" label="星期一" v-if="teachDate.indexOf('星期一') > -1">
                                <template scope="scope" v-show="false">
                                    <span @click="() => {tableChange(scope, 'Monday')}" 
                                        :class="{'no-assign-course': scope.row.Monday.indexOf('不排课') > -1, 'disabled-grade':type=='class' && scope.row.Monday.length > 3}">
                                        {{ scope.row.Monday}}
                                    </span>
                                </template>
                            </el-table-column>
                            <el-table-column prop="Tuesday" label="星期二" v-if="teachDate.indexOf('星期二') > -1">
                                <template scope="scope">
                                    <span @click="() => {tableChange(scope, 'Tuesday')}" 
                                        :class="{'no-assign-course': scope.row.Tuesday.indexOf('不排课') > -1, 'disabled-grade':type=='class' && scope.row.Tuesday.length > 3}">
                                        {{scope.row.Tuesday}}
                                    </span>
                                </template>
                            </el-table-column>
                            <el-table-column prop="Wednesday" label="星期三" v-if="teachDate.indexOf('星期三') > -1">
                                <template scope="scope">
                                    <span @click="() => {tableChange(scope, 'Wednesday')}" 
                                        :class="{'no-assign-course': scope.row.Wednesday.indexOf('不排课') > -1, 'disabled-grade':type=='class' && scope.row.Wednesday.length > 3}">
                                        {{scope.row.Wednesday}}
                                    </span>
                                </template>
                            </el-table-column>
                            <el-table-column prop="Thursday" label="星期四" v-if="teachDate.indexOf('星期四') > -1">
                                <template scope="scope">
                                    <span @click="() => {tableChange(scope, 'Thursday')}" 
                                        :class="{'no-assign-course': scope.row.Thursday.indexOf('不排课') > -1, 'disabled-grade':type=='class' && scope.row.Thursday.length > 3}">
                                        {{scope.row.Thursday}}
                                    </span>
                                </template>
                            </el-table-column>
                            <el-table-column prop="Friday" label="星期五" v-if="teachDate.indexOf('星期五') > -1">
                                <template scope="scope">
                                    <span @click="() => {tableChange(scope, 'Friday')}" 
                                        :class="{'no-assign-course': scope.row.Friday.indexOf('不排课') > -1, 'disabled-grade':type=='class' && scope.row.Friday.length > 3}">
                                        {{scope.row.Friday}}
                                    </span>
                                </template>
                            </el-table-column>
                            <el-table-column prop="Saturday" label="星期六" v-if="teachDate.indexOf('星期六') > -1">
                                <template scope="scope">
                                    <span @click="() => {tableChange(scope, 'Saturday')}" 
                                        :class="{'no-assign-course': scope.row.Saturday.indexOf('不排课') > -1, 'disabled-grade':type=='class' && scope.row.Saturday.length > 3}">
                                        {{scope.row.Saturday}}
                                    </span>
                                </template>
                            </el-table-column>
                            <el-table-column prop="Sunday" label="星期天" v-if="teachDate.indexOf('星期天') > -1">
                                <template scope="scope">
                                    <span @click="() => {tableChange(scope, 'Sunday')}" 
                                        :class="{'no-assign-course': scope.row.Sunday.indexOf('不排课') > -1, 'disabled-grade':type=='class' && scope.row.Sunday.length > 3}">
                                        {{scope.row.Sunday}}
                                    </span>
                                </template>
                            </el-table-column>
                        </el-table> -->
                        <table>
                            <thead>
                                <tr>
                                    <th></th>
                                    <th>星期一</th>
                                    <th>星期二</th>
                                    <th>星期三</th>
                                    <th>星期四</th>
                                    <th>星期五</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr v-for="(item,key) in tableData">
                                    <td v-if="item.noon" v-text="item.noon" :colspan="teachDate.length + 1"></td>
                                    <td v-text="item.num" v-if="!item.noon"></td>
                                    <td v-text="item.Monday" v-if="!item.noon && teachDate.indexOf('星期一') > -1"
                                         @click="() => {tableChange(item,'Monday', key)}" :class="{'no-assign-course': item.Monday.indexOf('不排课') > -1, 'disabled-grade':type=='class' && item.Monday.length > 3}"></td>
                                    <td v-text="item.Tuesday" v-if="!item.noon && teachDate.indexOf('星期二') > -1"
                                         @click="() => {tableChange(item,'Tuesday', key)}" :class="{'no-assign-course': item.Tuesday.indexOf('不排课') > -1, 'disabled-grade':type=='class' && item.Tuesday.length > 3}"></td>
                                    <td v-text="item.Wednesday" v-if="!item.noon && teachDate.indexOf('星期三') > -1"
                                         @click="() => {tableChange(item,'Wednesday', key)}" :class="{'no-assign-course': item.Wednesday.indexOf('不排课') > -1, 'disabled-grade':type=='class' && item.Wednesday.length > 3}"></td>
                                    <td v-text="item.Thursday" v-if="!item.noon && teachDate.indexOf('星期四') > -1"
                                         @click="() => {tableChange(item,'Thursday', key)}" :class="{'no-assign-course': item.Thursday.indexOf('不排课') > -1, 'disabled-grade':type=='class' && item.Thursday.length > 3}"></td>
                                    <td v-text="item.Friday" v-if="!item.noon && teachDate.indexOf('星期五') > -1"
                                         @click="() => {tableChange(item,'Friday', key)}" :class="{'no-assign-course': item.Friday.indexOf('不排课') > -1, 'disabled-grade':type=='class' && item.Friday.length > 3}"></td>
                                    <td v-text="item.Saturday" v-if="!item.noon && teachDate.indexOf('星期六') > -1"
                                         @click="() => {tableChange(item,'Saturday', key)}" :class="{'no-assign-course': item.Saturday.indexOf('不排课') > -1, 'disabled-grade':type=='class' && item.Saturday.length > 3}"></td>
                                    <td v-text="item.Sunday" v-if="!item.noon && teachDate.indexOf('星期天') > -1"
                                         @click="() => {tableChange(item,'Sunday', key)}" :class="{'no-assign-course': item.Sunday.indexOf('不排课') > -1, 'disabled-grade':type=='class' && item.Sunday.length > 3}"></td>
                                </tr>
                            </tbody>
                        </table>
                        <!-- 即时保存 ，撤销保存按钮 -->
                        <!-- <button type="button" class="btn-teaching-plan" id="btn-teaching-plan" @click="saveTable">保存</button> -->
                    </div>
                </el-row>
            </div>
        </div>
    </section>
</template>

<script>
import utils from '../../../assets/js/urlConfig.js';
import _ from 'lodash';
export default {
    data() {
        return {
            scheduleType: 'class',
            scheduleTypeOption: [
                { label: '班级不排课时间', value: 'class' },
                { label: '教师不排课时间', value: 'teacher' },
                { label: '课程不排课时间', value: 'course' },
            ],
            leftList: [],
            teacherCourse: '',
            courseOption: [],
            tableData: [],
            ids: '',
            classType: '',
            type: 'class',
            leftActive: 0,
            gradeName: '',
            allClassId: '',
            gradeTable: [],
            classNum: sessionStorage.getItem('classNum'),
            tableLoading: true,
            taskId: sessionStorage.getItem('taskId') || '91',
            teachDate: sessionStorage.getItem('teachDate') || '',
            yinshe : {
                '星期一': 'mon',
                '星期二': 'tues',
                '星期三': 'wed',
                '星期四': 'thur',
                '星期五': 'fri',
                '星期六': 'sut',
                '星期七': 'sun',
            },
            tableVal:{
                noon:0,
                timeAll:0,
            }
        }
    },
    mounted() {
        this.changeTeachDate();
        this.getTeachTime();
    },
    methods: {
        changeTeachDate() {
            this.teachDate = this.teachDate.split('|');
            for(let i=0; i<this.teachDate.length; i++) {
                if(this.yinshe[this.teachDate[i]]) {
                    delete this.yinshe[this.teachDate[i]]
                }
            }
        },
        // 保存表格修改
        saveTable() {
            // console.log('this.teachDate', this.teachDate)
            const param = {
                'taskId': this.taskId,
                'type': this.type,
                'classType': encodeURI(encodeURI(this.classType)),
                'ids': this.type == 'grade' ? this.allClassId : this.ids,
                'mon': '',
                'tues': '',
                'wed': '',
                'thur': '',
                'fri': '',
                'sut': '',
                'sun': '',
            }
            this.tableData.forEach(function(element, index) {
                if(!element.noon){
                    param['mon'] += this.changeData(element['Monday']);
                    param['tues'] += this.changeData(element['Tuesday']);
                    param['wed'] += this.changeData(element['Wednesday']);
                    param['thur'] += this.changeData(element['Thursday']);
                    param['fri'] += this.changeData(element['Friday']);
                    param['sut'] += this.changeData(element['Saturday']);
                    param['sun'] += this.changeData(element['Sunday']);
                }
            }, this);
             for(var value in this.yinshe) {
                 param[this.yinshe[value]] = '';
            }
            console.log(param)
            this.$http.post(utils.UrlConfig.RuleUpdateRule, this.changeParams(param))
                .then(res => {
                    this.$message({
                        message: '保存成功！',
                        type: 'success'
                    });
                    this.tableLoading = true;
                    this.getTableData();
                }).catch(error => {
                    this.$message.error(error);
                })
        },
        // 切换左侧树选中
        leftListClick(value, item) {
            this.leftActive = value;
            if (this.type == 'grade' && value != 0) {
                this.type = 'class';
            } else if (this.type == 'class' && value == 0) {
                this.type = 'grade';
            }
            if (this.type == 'class') {
                this.classType = item.classType;
            } else {
                this.classType = '';
            }
            this.ids = item.id;
            this.tableLoading = true;
            this.getTableData();
        },
        tableChange(scope, day ,key) {
            if(this.type=='class' && scope[day].length > 3) {
                this.$message.error('已设置年级不排课，所以不能再设置班级不排课');
                return;
            }
            this.tableData[key][day] = scope[day] == '' ? this.type == 'grade' ? `${this.gradeName}不排课` : '不排课' : '';
            this.tableLoading = true;
            this.saveTable();
        },
        // 获取课程信息
        getTeachTime() {
            this.$http.get(utils.UrlConfig.queryTeachTime + '&taskId=' + this.taskId)
            .then(res => {
                var arr = res.data.bizData.teachTime.split('|');
                var length = res.data.bizData.teachDate.split('|').length
                this.tableVal.noon = res.data.bizData.teachTime.split('|')[0];
                arr.forEach(function(item,index){
                    this.tableVal.timeAll += item * length;
                },this)
                this.getClassList();
            }).catch(error => {
                this.$message.error(error);
            })
        },
        // 获取班级列表
        getClassList() {
            this.$http.get(`${utils.UrlConfig.RuleGetClassList}&taskId=${this.taskId}`)
                .then(res => {
                    if (res.data.bizData && res.data.bizData.length) {
                        res.data.bizData.forEach(function(element) {
                            this.allClassId += element.id + ','
                        }, this);
                        this.allClassId = this.allClassId.slice(0, this.allClassId.length - 1); // 选年级时候提交数据需要的ids。
                        this.gradeName = res.data.bizData[0].grade;
                        res.data.bizData.unshift({ id: 0, name: this.gradeName })
                        this.$set(this.$data, 'leftList', res.data.bizData);
                        this.type = 'grade',
                        this.ids = res.data.bizData[0].id;
                        this.tableLoading = true;
                        this.getTableData();
                    }
                }).catch(error => {
                    this.$message.error(error);
                })
        },
        // 获取教师课程
        getTeacherCourse() {
            this.leftList = [];
            this.tableLoading = true;
            this.$http.get(`${utils.UrlConfig.RuleTeacherCourseList}&taskId=${this.taskId}`)
                .then(res => {
                    this.$set(this.$data, 'courseOption', res.data.bizData);
                    this.teacherCourse = res.data.bizData[0];
                    this.getTeacherList()
                }).catch(error => {
                    this.$message.error(error);
                })
        },
        // 获取教师列表
        getTeacherList() {
            this.$http.get(`${utils.UrlConfig.RulegetTeacherList}&taskId=${this.taskId}&teacherCourse=${this.teacherCourse}`)
                .then(res => {
                    this.$set(this.$data, 'leftList', res.data.bizData);
                    if (!res.data.bizData.length) {
                        return;
                    }
                    this.ids = res.data.bizData[0].id;
                    this.tableLoading = true;
                    this.getTableData();
                }).catch(error => {
                    this.$message.error(error);
                })
        },
        // 获取课程列表
        getCourseList() {
            this.$http.get(`${utils.UrlConfig.RuleGetCourseList}&taskId=${this.taskId}`)
                .then(res => {
                    this.$set(this.$data, 'leftList', res.data.bizData);
                    this.ids = res.data.bizData[0].id;
                    this.tableLoading = true;
                    this.getTableData();
                }).catch(error => {
                    this.$message.error(error);
                })
        },
        changeCours(value) {
            this.tableData = [];
            this.getTeacherList();
        },
        // 获取表格内容
        getTableData() {
            var params = this.changeParams({
                'id': this.ids,
                'type': this.type,
                'taskId': this.taskId,
                'classType': encodeURI(encodeURI(this.classType)),
            });
            this.$http.get(`${utils.UrlConfig.RuleGetRule}&${params}`)
                .then(res => {
                    this.tableData = [];
                    // 没有数据全部显示排课
                    if (!res.data.bizData) {
                        for (let i = 0; i < this.classNum ; i++) {
                            const each = {
                                'num': i + 1,
                                'Monday': '',
                                'Tuesday': '',
                                'Wednesday': '',
                                'Thursday': '',
                                'Friday': '',
                                'Saturday': '',
                                'Sunday': '',
                            }
                            if(i == (this.tableVal.noon)){
                                this.tableData.push({
                                    span:this.teachDate.length,
                                    noon:'午休'
                                })
                            }
                            this.tableData.push(each)
                        }
                    } else {
                        var res = res.data.bizData || [];
                        const len = res.mon.length || 0;
                        for (let i = 0; i < len; i++) {
                            const each = {
                                'num': i + 1,
                                'Monday': this.changeData(res.mon[i]-0),
                                'Tuesday': this.changeData(res.mon[i]-0),
                                'Wednesday': this.changeData(res.mon[i]-0),
                                'Thursday': this.changeData(res.mon[i]-0),
                                'Friday': this.changeData(res.mon[i]-0),
                                'Saturday': this.changeData(res.mon[i]-0),
                                'Sunday': this.changeData(res.mon[i]-0),
                            }
                            if(i == (this.tableVal.noon)){
                                this.tableData.push({
                                    span:this.teachDate.length,
                                    noon:'午休'
                                })
                            }
                            this.tableData.push(each)
                        }
                        if (this.type == 'grade') {
                            this.gradeTable = _.cloneDeep(this.tableData);
                            this.classGradeRule(this.tableData, this.tableData);
                        };
                    }
                    this.tableLoading = false;
                    if (this.type == 'class') {
                        this.classGradeRule(this.gradeTable, this.tableData);
                    }

                }).catch(error => {
                    this.$message.error(error);
                })
        },
        // 转换数据类型
        changeData(value) {
            switch(value) {
                case '不排课':return 0;
                case '':return 1;
                case '优先':return 2;
                case 0:return '不排课';
                case 1:return '';
                case 2:return '优先';
                default:return '';
            }
        },
        classGradeRule(grade, classdata) {
            const len = grade.length || 0;
            for (let i = 0; i < len; i++) {
                classdata[i]['Monday'] = grade[i]['Monday'] == '不排课' ? `${this.gradeName}不排课` : classdata[i]['Monday'];
                classdata[i]['Tuesday'] = grade[i]['Tuesday'] == '不排课' ? `${this.gradeName}不排课` : classdata[i]['Tuesday'];
                classdata[i]['Wednesday'] = grade[i]['Wednesday'] == '不排课' ? `${this.gradeName}不排课` : classdata[i]['Wednesday'];
                classdata[i]['Thursday'] = grade[i]['Thursday'] == '不排课' ? `${this.gradeName}不排课` : classdata[i]['Thursday'];
                classdata[i]['Friday'] = grade[i]['Friday'] == '不排课' ? `${this.gradeName}不排课` : classdata[i]['Friday'];
                classdata[i]['Saturday'] = grade[i]['Saturday'] == '不排课' ? `${this.gradeName}不排课` : classdata[i]['Saturday'];
                classdata[i]['Sunday'] = grade[i]['Sunday'] == '不排课' ? `${this.gradeName}不排课` : classdata[i]['Sunday'];
            }
        },
        changeParams(obj) {
            var str = '';
            for (var value in obj) {
                str = str + `${value}=${obj[value]}&`
            }
            return str.slice(0, str.length - 1);
        },
        // 隐藏的下拉框change事件
        changeScheduleType(value) {
            this.leftActive = 0;
            this.type = value;
            this.tableData = [];
            switch (value) {
                case 'class':
                    this.getClassList();
                    break;
                case 'teacher':
                    this.getTeacherCourse();
                    break;
                case 'course':
                    this.getCourseList();
                    break;
            }
        },
    }
}
</script>

<style scoped>
.change-type {
    padding-top: 25px;
}

.course-type {
    padding: 10px;
}

.no-course-time{
    margin-top:20px;
    height:auto;
}

.left-list{
    width: 180px;
    overflow: hidden;
}

.ulList{
    width: 100%;
    overflow: hidden;
    margin:0 auto;
    display: inline-block;
}

#class-items ul{
    width: 100%;
    min-height: 410px;
    overflow: auto !important;
    margin-top:0px;
    padding-top:20px;
    padding-left:50px;
    float:left;
    text-align: left;
}

#class-items ul li{
    padding-left:0;
}

#class-items,
#class-items a{
    border:none;
    font-size:16px;
    text-align: center;
    width: auto;
    transform: translateX(-15px);
}

.myTable{
    margin-left:165px;
    padding-left:20px;
    border-left:1px solid #d8d8d8;
    min-height:400px;
}

.tips{
    color:#36c6d3;
    font-size:14px;
}

table{
    width: 100%;
    table-layout: fixed;
    border-collapse: collapse;
}

th,td{
    cursor: pointer;
    border:1px solid #F9FAFE !important;
    height:50px;
}

.activeA{
    color: #36c6d3 !important;
    text-decoration: none;
    outline: 0;
}

.activeA::after{
    display: inline-block;
    content: '';
    width: 0;
    height: 0;
    border-top: 3.5px solid transparent;
    border-left: 4px solid #36c6d3;
    border-bottom: 4px solid transparent;
    position: absolute;
    right: -10px;
    top: 7px;
}
</style>
